<template>
  <div class="content">
    <div ref="chartsRef" style="width: 1000px; height: 550px"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import zhongguo from '@/assets/mapJson/china.json'
// import name2code from '@/assets/mapJson/map_name2code.json' // 省级 名字 拼音 代码 对照表
import { ref, onMounted } from 'vue'

onMounted(() => {
  initCharts()
})

const tooltip = {
  // 鼠标移入提示
  show: true,
  trigger: 'item',
  alwaysShowContent: false,
  backgroundColor: '#0C121C',
  borderColor: 'rgba(0, 0, 0, 0.16);',
  hideDelay: 100,
  triggerOn: 'mousemove',
  enterable: true,
  textStyle: {
    color: '#DADADA',
    fontSize: '12',
    width: 20,
    height: 30,
    overflow: 'break'
  },
  showDelay: 100,
  formatter(params: { name: string; value: any }) {
    return `地区：${params.name}</br>数值：${params.value[2]}`
  }
}

const geo = {
  map: 'china', // 名字是china，南海诸岛会以缩略图展示，但是以此之外来命名地图，则不会展示缩略图。
  roam: true, // 是否开启鼠标缩放和平移漫游
  label: {
    // 通常状态下的样式
    show: true,
    color: '#fff'
  },
  // 地图区域的样式设置
  itemStyle: {
    borderColor: 'rgba(147, 235, 248, 1)',
    borderWidth: 1,
    areaColor: {
      type: 'radial',
      x: 0.5,
      y: 0.5,
      r: 0.8,
      colorStops: [
        {
          offset: 0,
          color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
        }
      ],
      globalCoord: false // 缺省为 false
    },
    shadowColor: 'rgba(128, 217, 248, 1)',
    shadowOffsetX: -2,
    shadowOffsetY: 2,
    shadowBlur: 10
  },
  // 鼠标放上去高亮的样式
  emphasis: {
    label: {
      color: '#fff'
    },
    itemStyle: {
      areaColor: '#389BB7',
      borderWidth: 0
    }
  }
}

const series = [
  {
    type: 'scatter', // 散点（气泡）图
    coordinateSystem: 'geo',
    symbol: 'pin',
    legendHoverLink: true,
    symbolSize: [60, 60],
    // 这里渲染标志里的内容以及样式
    label: {
      show: true,
      formatter(value: any) {
        return value.data.value[2]
      },
      color: '#fff'
    },
    // 标志的样式
    itemStyle: {
      color: 'rgba(255,0,0,.7)',
      shadowBlur: 2,
      shadowColor: 'D8BC37'
    },
    // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
    // 至于如何展示，完全是靠上面的formatter来自己定义的
    data: [
      { name: '西藏', value: [91.23, 29.5, 2333] }, // 经度  纬度 数值
      { name: '黑龙江', value: [128.03, 47.01, 1007] }
    ],
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    zlevel: 1
  },
  {
    // 第二种散点气泡 渐变波纹
    type: 'effectScatter',
    coordinateSystem: 'geo',
    effectType: 'ripple',
    showEffectOn: 'render',
    symbolSize: [8, 8],
    rippleEffect: {
      brushType: 'fill',
      period: 10,
      scale: 10
    },
    itemStyle: {
      color: 'rgba(255, 235, 59, .7)',
      shadowBlur: 10,
      shadowColor: '#333'
    },
    zlevel: 1,
    data: [
      { name: '北京', value: [116.38141739, 39.9595215, 399] },
      { name: '上海', value: [121.47147309, 31.18985708, 22] }
    ]
  },
  {
    // 第三种散点气泡 线条扩散
    name: '',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    symbolSize: function (val: any) {
      // 涟漪特效动画的散点 波纹大小
      const baseSize = (val[2] / 50) * 3
      if (baseSize >= 10) {
        return 10
      } else if (baseSize <= 3) {
        return 3
      }
      return baseSize
    },
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke',
      period: 10,
      scale: 7,
      number: 4
    },
    itemStyle: {
      color: '#FF5959',
      shadowBlur: 10,
      shadowColor: '#FF5959'
    },
    zlevel: 1,
    data: [
      { name: '安徽', value: [117.27190478, 30.9869525, 666] },
      { name: '江西', value: [115.62540309, 28.35185683, 1007] }
    ]
  }
]

const option = ref()
const chartsRef = ref()
const chartsInstance = ref()

const initCharts = () => {
  chartsInstance.value = echarts.init(chartsRef.value)
  option.value = {
    backgroundColor: '#404a59', // 背景颜色
    tooltip, // 提示浮窗样式
    geo, // 地图配置
    series
  }
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap('china', zhongguo)

  chartsInstance.value.setOption(option.value)
}
</script>
